<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>菜单</title>
    <script type="text/javascript">
        /*  var rel = document.querySelector(".rel");
          var ope = document.querySelector(".ope");
          var add = document.querySelector(".add");
          var del = document.querySelector(".del");
          var upd = document.querySelector(".upd");
  */



        //获取所有图片对于的div
        var dott_list = document.querySelectorAll("div.ax_image");
        var i = 1;

        //图标添加点击事件
        for (var h = 0; h < dott_list.length; h++) {
            dott_list[h].onclick = function() {

                var parent = this.parentElement;

                var child = document.getElementById(parent.getAttribute("id") + "_children");


                var img = this.firstElementChild;

                if (i == 1) {
                    img.setAttribute("src", "../../static/assets/images/zuzhi/u4.png");
                    child.setAttribute("style", "visibility: hidden; display: none;");
                    i = 0;
                } else {
                    img.setAttribute("src", "../../static/assets/images/zuzhi/u4.pngu4_selected.png");
                    child.setAttribute("style", "visibility: visible;");
                    i = 1;
                }

                // img.setAttribute("src", "images/组织/u4.png");
                // alert(img.getAttribute("src"));

            }
        }


        var leftMenuSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback : {
                onClick : onClickNode
            }
        };
        function leftMenuLoad() {
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/menu/getMenuTree}]]*/'',
                    data: [],
                    success: function (data) {
                        $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
        function onClickNode(event, treeId, treeNode){
            $("#table-i18n-edit-id").tableEditOptions({
                extParam:[
                    {name:"menuId",value:treeNode.id}
                ]
            }).tableEditReload();

        }
        $(function() {
            leftMenuLoad();
        });//ready





        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-85; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            _gridWidth =  _gridWidth - 153;
            var _columnWidth = _gridWidth/3;
            $("#table-i18n-edit-id").tableEditData({
                width : _gridWidth,
                height:400,
                url:/*[[@{/menu/getI18nByMenuId}]]*/"",
                colModel : [
                    {display : 'menuId',name : 'menuId',width : 150,align : 'center',hide : 'true'},
                    {display : /*[[#{menu.lang}]]*/"",name : 'langId',width : _columnWidth,dom: function(obj,v,_trid,_row){
                            var select = $("#lang-template-id").clone();
                            select.removeClass("fade");
                            select.val(v);
                            select.css("width","43%");
                            select.appendTo(obj);
                            select.attr("readonly",true);
                            if(_row){
                                select.attr("disabled","disabled");
                            }else {
                                select.removeAttr("disabled");
                            }

                            var span = $("<span></span>");
                            span.addClass("read");
                            var vl  =  select.find("option[value='" + v + "']").text();
                            span.text(vl);
                            span.appendTo(obj);


                        }},
                    {display : /*[[#{menu.name}]]*/"",name : 'menuName',width : _columnWidth},
                    {display : /*[[#{common.operation}]]*/"",name : 'menuName',width : _columnWidth,process: function(v,_trid,_row) {
                            var html='<a href="#" class="read" onclick="editTable(\''+ _trid +'\');"> <i class="fa fa-pencil"></i> </a>';
                            html +='<a href="#" class="edit" onclick="saveTable(\''+ _trid +'\');"> <i class="fa fa-floppy-o"></i> </a>';
                            html +='<a href="#" class="read" onclick="deleteTable(\''+ _trid +'\');"> <i class="fa fa-trash-o"></i> </a>';

                            return html;
                        }}
                ]
            })

        })


    </script>
    <style>
        ul {
            list-style: none;
        }

        .main {
            display: flex;
            /* justify-content: space-between; */
        }

        .main>div {
            margin: 10px;
        }


        /* right */

        .main .right {
            height: 100px;
        }

        .main .right input {
            margin-top: 5px;
        }


        /*  */


        /* mid */

        .mid .top {
            padding: 20px;
            background: dodgerblue;
            color: white;
            font-size: 5px;
            width: 520px;
            height: 140px;
        }

        .mid .url {
            margin-left: 1px;
        }

        .mid div {
            margin-top: 10px;
        }

        .mid div:first-child {
            margin-top: 0px;
        }

        .mid select {
            width: 158px
        }

        .mid input {
            width: 150px;
        }

        table {
            text-align: center;
            margin: 0px;
            padding: 0px;
            border-top: 1px solid;
            border-left: 1px solid;
            border-collapse: collapse;
        }

        td,
        tr {
            border-right: 1px solid;
            border-bottom: 1px solid;
        }

        .mid .bot table tr td {
            width: 180px;
        }

        .mid .bot table tr td>input[type="button"] {
            margin-left: 3px;
            width: 40px;
        }

        .mid .bot table tr td select {
            width: 50px;
        }


        /*  */


        /* left */

        .main .left {
            /* margin-left: auto; */
            /* margin-right: auto; */
            width: 20%;
            background: pink;
            color: white;
            font-size: 5px;
        }


        /*  */

        #u2 {
            /* display: none; */
            display: inline-block;
        }

        #u3 {
            display: inline-block;
        }

        #u1_children {
            padding-left: 20px;
        }

        #u6 {
            display: inline-block;
        }

        #u8 {
            display: inline-block;
        }

        #u5_children {
            padding-left: 20px;
        }

        .img {
            padding: 10px 2px 0 2px;
        }
    </style>
</head>

<body>

    <div class="main">
        <div class="left">
            <div id="u0" class="node treeroot">
                <div id="u0_children" class="u0_children">
                    <div id="u1" class="node treenode">
                        <div id="u3" class="u0_tree_group">
                            <div id="u4" class="text">
                                <p><span>资询</span></p>
                            </div>
                        </div>
                        <div id="u1_children" class="u1_children">
                            <div id="u5" class="node treenode">


                                <div id="u8" class="" selectiongroup="u0_tree_group">
                                    <div id="u9" class="text">
                                        <p><span>价格</span></p>
                                    </div>
                                </div>

                                <div id="u5_children" class="u5_children">

                                    <div id="u10" class="node treenode">
                                        <div id="u11" class="u0_tree_group">
                                            <div id="u12" class="text">
                                                <p><span>环渤海指数BSPI</span></p>
                                            </div>
                                        </div>
                                    </div>


                                    <div id="u13" class="node treenode">

                                        <div id="u14" class="u0_tree_group">
                                            <div id="u15" class="text">
                                                <p><span>期货价格</span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="mid">
            <div class="top">
                <div>
                    <span>菜单编码</span>
                    <input type="text">
                    <span>URL</span>
                    <input type="text" class="url">
                </div>
                <div>
                    <span>菜单名称</span>
                    <input type="text">
                    <span>顺序</span>
                    <input type="text">
                </div>
                <div>
                    <span>菜单类型</span>
                    <select id="menu_name">
                        <option value="0">菜单目录</option>
                        <option value="1">菜单</option>
                        <option value="2">页面功能</option>
                    </select>
                    <span>权限</span>
                    <input type="text">
                </div>
                <div>
                    <span>菜单级别</span>
                    <select id="menu_level">
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                        
                    </select>
                    <span>图标</span>
                    <input type="text">
                </div>
            </div>
<!--            <div class="bot">-->
<!--                <p>国际化</p>-->
<!--                <table>-->
<!--                    <tr>-->
<!--                        <td>菜单名称</td>-->
<!--                        <td>语言类型</td>-->
<!--                        <td>操作</td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td id="name">组织</td>-->
<!--                        <td>中文</td>-->
<!--                        <td>-->
<!--                            <input type="button" value="编辑">-->
<!--                            <input type="button" value="删除">-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td><input type="text" name="" id="en_name" value="organization"></td>-->
<!--                        <td>-->
<!--                            <select name="" id="">-->
<!--                            <option value="chi" >中文</option>-->
<!--                            <option value="eng">英文</option>-->
<!--                        </select>-->
<!--                        </td>-->
<!--                        <td><input type="button" value="保存"></td>-->
<!--                    </tr>-->
<!--                </table>-->
<!--            </div>-->

        </div>
        <div class="right">
            <input class="rel" type="button" value="解除绑定"><br/>
            <input class="ope" type="button" value="打开绑定"><br/>
            <input class="add" type="button" value="增加菜单"><br/>
            <input class="del" type="button" value="删除菜单"><br/>
            <input class="upd" type="button" value="修改菜单">
        </div>

    </div>
    <div>
    <h3>国际化</h3>>
    <div style="display: flex">
        <table id="table-i18n-edit-id" class="table-edit-data"></table>
        <select  id="lang-template-id" class="edit fade" name="langId"  gdmt:dicselect="lang.type"></select>
    </div>
    <form>
        <input type="radio" name="lang" value="chinese"><span>中文</span><br>
        <input type="radio" name="lang" value="english"><span>english</span><br>
        <input type="radio" name="lang" value="japanese"><span>日本語</span><br>
        <input type="radio" name="lang" value="french"><span>Français</span><br>
        <input type="radio" name="lang" value="german"><span>Deutsch</span><br>
        <input type="radio" name="lang" value="russian"><span>русский язык</span><br>
        <input type="email" placeholder="您可以在此输入其他语言">
        <button type="submit">确定</button>>  
    </div>
</body>

</html>